<template>
    <div class="leftCenter">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span>
                  <icon name="chart-bar" class="text-icon"></icon>
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">剧组增长趋势</span>
                    <dv-decoration-3 class="dv-dec-3"/>
                </div>
            </div>
            <div style="height: 260px">
                <dv-charts :option="option" style="width: 100%; height: 100%" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "leftCenter",
        components: {},
        data() {
            return {
                option: {
                    title: {
                        // text: '周销售额趋势'
                    },
                    grid: {
                        top: '10%',
                        right: '5%'
                    },
                    xAxis: {
                        // name: '第一周',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisLabel: {
                            style: {
                                fill: '#ccc'
                            }
                        },
                        axisTick: {
                            style: {
                                stroke: '#343f4b',
                                lineWidth: 1
                            }
                        },
                        axisLine: {
                            style: {
                                stroke: '#343f4b',
                                lineWidth: 1
                            }
                        },
                        splitLine: {
                            style: {
                                stroke: '#343f4b',
                                lineWidth: 1
                            }
                        }
                    },
                    yAxis: {
                        // name: '销售额',
                        data: 'value',
                        axisLabel: {
                            style: {
                                fill: '#ccc'
                            }
                        },
                        min: 0,
                        max: 360,
                        axisTick: {
                            show: false,
                            style: {
                                stroke: '#343f4b',
                                lineWidth: 1
                            }
                        },
                        axisLine: {
                            style: {
                                stroke: '#343f4b',
                                lineWidth: 1
                            }
                        },
                        splitLine: {
                            style: {
                                stroke: '#343f4b',
                                lineWidth: 1
                            }
                        }
                    },
                    series: [
                        {
                            data: [45, 60, 80, 135, 176, 220, 248, 272, 280, 309, 328],
                            type: 'bar',
                            gradient: {
                                color: ['#37a2da', '#67e0e3']
                            }
                        }
                    ]
                }
            }
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
.leftCenter{
    $box-width: 100%;
    $box-height: 290px;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
        height: $box-height - 30px;
        border-radius: 10px;overflow: hidden;
    }
    .text {
        color: #c3cbde; font-size: 16px;
    }
    .dv-dec-3 {
        position: relative;
        width: 100px;
        height: 20px;
        top: -3px;
    }
}
</style>
